<template>
  <div class="baseinfo" v-title data-title="工业设计立项界面">
    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-model-item label="项目编号" prop="projectNo" :label-col="{ span: 8 }" :wrapper-col="{ span: 15 }">
            {{ form.projectNo }}
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item
            ref="projectName"
            label="项目名称"
            prop="projectName"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-input
              v-model="form.projectName"
              @blur="
                () => {
                  $refs.projectName.onFieldBlur()
                }
              "
              placeholder="请输入有效的项目名称"
              :disabled="form.status > 1"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item
            label="项目分类"
            prop="projectTypeSubCategory"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-select
              v-model="form.projectTypeSubCategory"
              placeholder="请选择项目分类"
              :options="projectCategoryOptions"
              :disabled="form.id != ''"
            >
              <a-icon slot="suffixIcon" type="plus" />
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-model-item
            label="项目类型"
            prop="graphicSubType"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-select
              v-model="form.graphicSubType"
              placeholder="请选择项目类型"
              :options="graphicSubTypeOptions"
              @change="graphicSubTypeChange"
            >
              <a-icon slot="suffixIcon" type="plus" />
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item
            ref="hatchProjectNo"
            label="孵化项目编号"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-input
              v-model="form.hatchProjectNo"
              placeholder="点击选择孵化项目"
              @click="hatch.visible = true"
              :disabled="form.status > 1"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item
            ref="hatchProjectName"
            label="孵化项目名称"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-input
              v-model="form.hatchProjectName"
              placeholder="点击选择孵化项目"
              @click="hatch.visible = true"
              :disabled="form.status > 1"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-model-item
            label="关联项目编号"
            prop="associatedNumber"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-input
              v-model="form.associatedNumber"
              placeholder="点击选择关联项目"
              @click="associated.visible = true"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item
            ref="graphicLevel"
            label="项目等级"
            prop="graphicLevel"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-input
              v-model="form.graphicLevel"
              @blur="
                () => {
                  $refs.graphicLevel.onFieldBlur()
                }
              "
              placeholder="关联项目带出项目等级"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item
            ref="mainDeptName"
            label="主导经营体"
            prop="mainDeptName"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-select
              v-model="form.mainDeptId"
              placeholder="主导经营体"
              :options="mainDeptOptions"
              @change="mainDeptChange"
              title="如有新品质，以触发源经营体为准；如仅为新包装，以本项发起经营体主导。"
            >
              <a-icon slot="suffixIcon" type="plus" />
            </a-select>
            <!-- <a-input
              v-model="form.mainDeptName"
              :disabled="mainDeptNameDisabled"
              placeholder="请填写正确的组织架构名称，系统自动校验"
            /> -->
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-model-item
            ref="productName"
            label="产品名称"
            prop="productName"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-input
              v-model="form.productName"
              @blur="
                () => {
                  $refs.productName.onFieldBlur()
                }
              "
              placeholder="请输入产品名称"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item
            ref="specificationPlanName"
            label="规格规划"
            prop="specificationPlanName"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-input
              v-model="form.specificationPlanName"
              @blur="
                () => {
                  $refs.specificationPlanName.onFieldBlur()
                }
              "
              placeholder="请输入规格规划"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item
            label="包装物类型"
            prop="packagingPlan"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-select
              v-model="form.packagingPlan"
              placeholder="请选择包装物类型"
              :options="packagingPlanOptions"
              @change="packagingPlanChange"
            >
              <a-icon slot="suffixIcon" type="plus" />
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-model-item
            ref="listingPlan"
            label="上市规划"
            prop="listingPlan"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 15 }"
            title="按关联项目上市规划时间显示或按包装项目规划时间填写;关联项目规划时间需要与包装项目规划时间沟通匹配，非单一方机械规定。"
          >
            <a-date-picker v-model="form.listingPlan" placeholder="请输入上市规划" />
          </a-form-model-item>
        </a-col>

        <a-col :span="8">
          <a-form-model-item
            label="设计供应商"
            ref="designSupplierName"
            prop="designSupplierName"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 15 }"
            title="依托现有包材供应商，或者第三方设计公司。"
          >
            <a-input
              v-model="form.designSupplierName"
              placeholder="点击选择设计供应商"
              @click="supplier.visible = true"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-model-item
            ref="graphicContent"
            label="项目内容简述"
            prop="graphicContent"
            :label-col="{ span: 3 }"
            :wrapper-col="{ span: 20 }"
          >
            <a-textarea
              v-model="form.graphicContent"
              @blur="
                () => {
                  $refs.graphicContent.onFieldBlur()
                }
              "
              :auto-size="{ minRows: 3, maxRows: 5 }"
              style="width: 100%"
              placeholder="如产品包装物和规格，产品规划、对内外市场定位、目标人群、使用方式，上市规划等信息可简单描述"
            />
          </a-form-model-item>
        </a-col>
      </a-row>

      <five-to-five
        ref="fiveForm"
        :projectBuildId="projectBuildId"
        :change-id="changeId"
        @addField="addFiveDataToForm"
      />
    </a-form-model>
    <pagination-select
      :title="hatch.title"
      :searchPlaceholder="hatch.searchPlaceholder"
      :visible="hatch.visible"
      :url="hatch.url"
      :columns="hatch.columns"
      @hatchHandleOk="hatchHandleOk"
    />

    <pagination-select
      :title="associated.title"
      :searchPlaceholder="associated.searchPlaceholder"
      :visible="associated.visible"
      :url="associated.url"
      :columns="associated.columns"
      @hatchHandleOk="associatedHandleOk"
    />

    <pagination-select
      :title="supplier.title"
      :searchPlaceholder="supplier.searchPlaceholder"
      :visible="supplier.visible"
      :url="supplier.url"
      :columns="supplier.columns"
      @hatchHandleOk="supplierHandleOk"
    />
  </div>
</template>
<script>
import $ from 'jquery'
import { getAction, getActionAsync, postAction, postActionAsync } from '@/api/manage'
import { getParamValFromUrl, strNotNull } from '@/utils/common.js'
import Vue from 'vue'
import { ACCESS_TOKEN, USER_INFO } from '@/store/mutation-types'
export default {
  components: {
    PaginationSelect: () => import('@/components/tools/PaginationSelect'),
    FiveToFive: () => import('@/components/tools/projectBuildStup/baseInfo/FiveToFive'),
  },
  props: {
    projectBuildId: {
      Type: String,
      default: '',
    },
    changeId: {
      Type: String,
      default: '',
    },
    selProjectType: {
      Type: String,
      default: '',
    }
  },
  data() {
    return {
      labelCol: { span: 8 },
      wrapperCol: { span: 15 },
      form: {
        id: '',
        projectClass: '80',
        projectNo: '',
        projectName: '',
        mainDeptName: '',
        mainDeptId: undefined,
        projectTypeSubCategory: '',
        hatchProjectId: '',
        hatchProjectNo: '',
        hatchProjectName: '',
        designSupplierName: '',
        designSupplier: '',
        listingPlan: '',
        graphicContent: '',
        packagingPlanName: '',
        packagingPlan: undefined,
        specificationPlanName: '',
        specificationPlan: '',
        productName: '',
        associatedNumberName: '',
        associatedNumber: '',
        associatedProjectBuildId: '',
        graphicLevel: '',
        graphicSubTypeName: '',
        graphicSubType: undefined,
        status: 0,
      },
      rules: {
        projectName: [
          { required: true, message: '请输入有效的项目名', trigger: 'blur' },
          { min: 1, max: 50, message: '项目名不超过50个字符', trigger: 'blur' },
        ],
        mainDeptId: [{ required: true, message: '请选择组织架构名称，系统自动校验', trigger: 'blur' }],
        projectTypeSubCategory: [{ required: true, message: '请选择项目分类', trigger: 'change' }],
        graphicSubType: [{ required: true, message: '请选择项目类型', trigger: 'change' }],
        productName: [
          { required: true, message: '请输入产品名称', trigger: 'blur' },
          { min: 1, max: 200, message: '产品名称不超过200个字符', trigger: 'blur' },
        ],
        specificationPlanName: [
          { required: true, message: '请输入规格规划', trigger: 'blur' },
          { min: 1, max: 200, message: '规格规划不超过200个字符', trigger: 'blur' },
        ],
        packagingPlan: [{ required: true, message: '请选择包装物规划', trigger: 'change' }],
        graphicContent: [{ min: 1, max: 1000, message: '项目内容简述不超过1000个字符', trigger: 'blur' }],
        // associatedNumber: [{ required: true, message: '请选择关联项目', trigger: 'blur' }],
        listingPlan: [{ required: true, message: '请填写上市规划', trigger: 'change' }],
        designSupplierName: [{ required: true, message: '请选择设计供应商', trigger: 'blur' }],
      },
      projectCategoryOptions: [],
      graphicSubTypeOptions: [],
      packagingPlanOptions: [],
      mainDeptOptions:[],
      url: {
        codeInfoList: '/manage/codeInfo/list',
        getProjectByNo: '/projectBuild/getProjectByNo',
        save: '/projectBuild/add',
        queryVOById: '/projectBuild/queryVOById',
      },
      hatch: {
        visible: false,
        title: '请选择孵化项目',
        searchPlaceholder: '输入代码或名称查询',
        url: '/hatchProject/listBySelect',
        columns: [
          {
            title: '孵化项目编号',
            dataIndex: 'hatchProjectNo',
            align: 'center',
          },
          {
            title: '孵化项目名称',
            dataIndex: 'hatchProjectName',
            align: 'center',
          },
        ],
      },
      mainDeptNameDisabled: false,
      associated: {
        visible: false,
        title: '请选择关联项目',
        searchPlaceholder: '输入代码或名称查询',
        url: '/projectBuild/queryAssociated',
        columns: [
          {
            title: '关联项目编号',
            dataIndex: 'projectNo',
            align: 'center',
          },
          {
            title: '关联项目名称',
            dataIndex: 'projectName',
            align: 'center',
          },
        ],
      },
      supplier: {
        visible: false,
        title: '请选择设计供应商',
        searchPlaceholder: '输入代码或名称查询',
        url: '/projectBuild/queryDesignSupplier',
        columns: [
          {
            title: '设计供应商编号',
            dataIndex: 'designSupplier',
            align: 'center',
          },
          {
            title: '设计供应商名称',
            dataIndex: 'designSupplierName',
            align: 'center',
          },
          {
            title: '现有单数',
            dataIndex: 'num',
            align: 'center',
          },
        ],
      },
      loadFinish: false,
    }
  },
  computed: {},
  methods: {
    addFiveDataToForm(val, valRef) {
      this.$set(this.form, valRef, val)
    },
    async doSubmit() {
      if (!this.loadFinish) {
        layer.message.warning('请等待页面加载完毕')
        return {}
      }
      var validR = false
      try {
        validR = await this.$refs.ruleForm.validate()
        validR = await this.$refs.fiveForm.checkFiveWriteStatus()
      } catch (e) {
        validR = false
      }
      console.log('validR', validR)
      this.form.validResult = validR
      let res = await this.doSave()
      this.projectBuildId = res
      return { valid: validR, id: res }
    },
    async doSave() {
      let flag = null
      this.form.changeId = this.changeId
      var formData = JSON.parse(JSON.stringify(this.form))
      var vm = this
      await postActionAsync(this.url.save, formData)
        .then((res) => {
          if (res.code == 200) {
            vm.form.id = res.result.id
            vm.form.projectNo = res.result.projectNo
            this.$message.success('保存成功')
            return (flag = res.result.id)
          } else {
            this.$message.warning('保存数据出错:' + res.message)
          }
        })
        .catch((res) => {
          this.$message.warning('保存数据出错:' + res.message)
        })
      return flag
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()
    },
    //初始化项目子类
    initProjectCategoryOptions() {
      var vm = this
      getAction(this.url.codeInfoList, { type: '项目子类', isdel: 0, parentid: vm.form.projectClass,code:this.selProjectType , pageSize: -1 })
        .then((res) => {
          if (res.code == 200) {
            var list = res.result
            if (list != null) {
              list.records.map((item) => {
                vm.projectCategoryOptions.push({ value: item.code, label: item.name })
              })

              if (vm.projectCategoryOptions.length === 1) {
                vm.form.projectTypeSubCategory = vm.projectCategoryOptions[0].value
              }
            }
          } else {
            this.$message.warning('查询项目子类失败:' + res.message)
          }
        })
        .catch((res) => {
          this.$message.warning('查询项目子类失败:' + res.message)
        })
    },
    initSelectOptions() {
      var vm = this
      vm.mainDeptOptions = [];
      vm.mainDeptOptions.push({ value: Vue.ls.get(USER_INFO).deptId+'', label: Vue.ls.get(USER_INFO).deptName })
      getAction(this.url.codeInfoList, { type: '工业设计类型', pageNo: 1, pageSize: 9999, isdel: 0 })
        .then((res) => {
          if (res.code == 200) {
            var list = res.result
            if (list != null) {
              list.records.map((item) => {
                vm.graphicSubTypeOptions.push({ value: item.code, label: item.name })
              })
            }
          } else {
            this.$message.warning('查询工业设计类型失败:' + res.message)
          }
        })
        .catch((res) => {
          this.$message.warning('查询工业设计类型失败:' + res.message)
        })

      getAction(this.url.codeInfoList, { type: '工业设计包装物类型', pageNo: 1, pageSize: 9999, isdel: 0 })
        .then((res) => {
          if (res.code == 200) {
            var list = res.result
            if (list != null) {
              list.records.map((item) => {
                vm.packagingPlanOptions.push({ value: item.code, label: item.name })
              })
            }
          } else {
            this.$message.warning('查询工业设计包装物类型失败:' + res.message)
          }
        })
        .catch((res) => {
          this.$message.warning('查询工业设计包装物类型失败:' + res.message)
        })
    },
    graphicSubTypeChange(value, option) {
      this.form.graphicSubTypeName = option.componentOptions.children[0].text
    },
    packagingPlanChange(value, option) {
      this.form.packagingPlanName = option.componentOptions.children[0].text
    },
    mainDeptChange(value, option) {
      this.form.mainDeptName = option.componentOptions.children[0].text
    },
    //孵化项目选中
    hatchHandleOk(record) {
      if (record != null && record.length > 0) {
        this.form.hatchProjectId = record[0].id
        this.form.hatchProjectNo = record[0].hatchProjectNo
        this.form.hatchProjectName = record[0].hatchProjectName
      }
      this.hatch.visible = false
    },
    associatedHandleOk(record) {
      if (record != null && record.length > 0) {
        this.form.associatedNumber = record[0].projectNo
        this.form.associatedNumberName = record[0].projectName
        this.form.associatedProjectBuildId = record[0].id
        // this.form.mainDeptName = record[0].mainDeptName
        // this.form.mainDeptId = record[0].mainDeptId
        if (record[0].hatchProjectNo == '1') {
          this.form.graphicLevel = record[0].projectLevel
          if (record[0].completionDate) {
            this.form.listingPlan = record[0].completionDate
          }
        }
        console.log(Vue.ls.get(USER_INFO).deptId + '')
        console.log(typeof Vue.ls.get(USER_INFO).deptId)
        this.mainDeptOptions = [];
        this.mainDeptOptions.push({ value: Vue.ls.get(USER_INFO).deptId+'', label: Vue.ls.get(USER_INFO).deptName })
        if (record[0].mainDeptId && record[0].mainDeptName && Vue.ls.get(USER_INFO).deptId != record[0].mainDeptId) {
          this.mainDeptOptions.push({ value: record[0].mainDeptId+'', label: record[0].mainDeptName })
        }
      }
      this.associated.visible = false
    },
    supplierHandleOk(record) {
      if (record != null && record.length > 0) {
        this.form.designSupplier = record[0].designSupplier
        this.form.designSupplierName = record[0].designSupplierName
      }
      this.supplier.visible = false
    },
    //如果有id，则加载已填写信息
    initData() {
      if (this.projectBuildId != null && this.projectBuildId != '') {
        var vm = this
        getAction(this.url.queryVOById, { id: this.projectBuildId, changeId: this.changeId })
          .then((res) => {
            if (res.code == 200) {
              var result = res.result
              if (result != null) {
                this.form = result
                if (this.form.mainDeptId) {
                  this.form.mainDeptId = this.form.mainDeptId + ''
                  console.log(this.form.mainDeptId)
                  console.log(typeof this.form.mainDeptId)
                }
                this.loadFinish = true
              } else {
                vm.$message.warning('初始化项目信息为空')
              }
            } else {
              this.$message.warning('初始化项目信息失败:' + res.message)
            }
          })
          .catch((res) => {
            this.$message.warning('初始化项目信息失败:' + res.message)
          })
      } else {
        this.loadFinish = true
      }
    },
  },
  mounted() {
    this.initProjectCategoryOptions()
    this.initSelectOptions()
    this.initData()
  },
}
</script>
<style lang="less" scoped>
/deep/ .ant-btn-primary {
  width: 85px;
  height: 30px;
  border-radius: 2px;
  background: #4095e4;
  margin-right: 10px;
}
/deep/ .default {
  width: 85px;
  height: 30px;
  border-radius: 2px;
}
.baseinfo {
  background-color: #fff;
  border: 1px solid #eaeaea;
  padding: 30px;
  .btn {
    display: flex;
    justify-content: center;
  }
}
</style>